﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="LichSuDatHang.aspx.cs" Inherits="IMark.LichSuDatHang" %>
<%@ Register src="UC/MenuAccountCtrl.ascx" tagname="MenuAccountCtrl" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.metro.min.css" rel="stylesheet" />
    <script src="js/kendo.all.min.js"></script>
    <style>
        .k-header,.k-link{
            color:#000 !important;
            font-weight: bold !important;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="row clearfix f-space10"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-12 col-xs-12 box-block">
                <div class="breadcrumb" style="width: 100%; margin: 0px"><a href="/"><i class="fa fa-home fa-fw"></i>Home </a><i class="fa fa-angle-right fa-fw"></i><a href="LichSuDatHang.aspx">Lịch Sử Đặt Hàng</a></div>
                <label id="error" runat="server" style="width: 100%"></label>
                <h4>Danh sách đơn hàng</h4>
                <div id="grvDonHang"></div>
            </div>
            <div class="col-md-3 col-sm-12 col-xs-12 box-block page-sidebar">
                <uc1:MenuAccountCtrl ID="MenuAccountCtrl1" runat="server" />
            </div>
        </div>
    </div>
    <div class="row clearfix f-space20"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: "http://" + location.host + "/eMartSer/eMartServices.svc/LayDanhSachDonHangTheoKhachHang/"+'<%=IDKH%>',
                success:function(data)
                {
                    $("#grvDonHang").kendoGrid({
                        dataSource: data,
                        pageable: true,
                        columns: [
                            { field: "MaHD", title: "Mã Hóa Đơn", width: 100 },
                            { field: "HoTen", title: "Họ Tên" },
                            { field: "DienThoai", title: "Điện Thoại",width:100 },
                            { field: "Email", title: "Email" },
                            { field: "NgayDat", title: "Ngày Đặt", type: "date", format: "{0:dd/MM/yyyy}", width: 100 },
                            { field: "ThanhTien", title: "Thành Tiền", format: "{0:c0}", type: "number", width: 100 },
                            {
                                field: "TrangThai", title: "Trạng Thái", template: "# if(data.TrangThai == true) " +
                                             "{# <div>Đã thanh toán</div>#} " +
                                             "else {# <div>Chưa thanh toán </div> #}#"
                            }],
                        scrollable: false,
                        sortable: true,
                        detailInit: detailInit,
                        dataBound: function () {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        
                    })
                    //, format: "{0:c}" 
                }
            })
        })

        function detailInit(e) {
            $.ajax({
                url: "http://" + location.host + "/eMartSer/eMartServices.svc/LayChiTietHDTheoMaHD/" + e.data.MaHD,
                success:function(Result)
                {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                            data: Result,
                            //serverPaging: true,
                            //serverSorting: true,
                            //serverFiltering: true,
                            pageSize: 5,
                            filter: { field: "MaHD", operator: "eq", value: e.data.MaHD }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "SAN_PHAM.TenSanPham", title: "Tên Sản Phẩm" },
                            { field: "DonGia", title: "Đơn Giá"},
                            { field: "GiamGia", title: "Giảm Giá" },
                            { field: "SoLuong", title: "Số Lượng" }
                        ]
                    });
                }
            })
            
        }
    </script>
</asp:Content>
